<!doctype html>
<html>
<head>
	<!--
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}">

<script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/main.js') }}"></script>
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}">

<script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script>
     <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
     <!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
     <!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="{{ url_for('static',filename='js/main.js') }}"></script>
<style type="text/css">
	h1{
		text-align:center}
	table{
		margin:0 auto;
		width:100%;
		border:2px solid rgba(202, 223, 238, 0.87);
		border-collapse:collapse}
	table th,table td{
		border:2px solid rgba(202, 223, 238, 0.87);
		padding:5px;
		
		}
	th{
		background-color:rgba(202, 223, 238, 0.87);}
</style>
</head>

<body>
	<div class="alldiv">
			<div class="left_navigation" id="left_nav">
				
			</div>
			<script>
				$(left_nav).load('/Public/leftNav')
			</script>

		<div class="righthtml" >

			<img src="{{ url_for('static',filename='image/search2.jpg') }}" width="100%" height="200">
			<div class="mine_center_left">
					<div class="center_left_bottom">
						<div>
							
							<!-- Nav tabs -->
							<ul class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active"><a href="#Q1" aria-controls="Q1" role="tab" data-toggle="tab">personal_info</a></li>
							</ul>
							
							<!-- Tab panes -->
							<div class="tab-content">
								<div role="tabpanel" class="tab-pane fade in active" id="Q1">
								<div style="height:40px;margin-top:20px;margin-bottom:20px">
									<div class="col-lg-5">
										<div class="input-group">
											<span class="input-group-addon">patient name</span> <!--140-->
											<input type="test" class="form-control" aria-label="..." id ='p_name'>
											</div><!-- /input-group -->
									</div>
									<div class="col-lg-5">
										<div class="input-group">
											<span class="input-group-addon">doctor id</span> <!--140-->
											<input type="test" class="form-control" aria-label="..." id ='doc_id'>
											</div><!-- /input-group -->
									</div>
									<button class="btn btn-primary" style="width: 100px;" onclick="queryInfo();" id ='sub1'>Submit</button>
								</div>
									<div >
										<table>
											<tr align="center">
												<th align="center"> id </th>
												<th align="center"> name </th>
												<th align="center"> doctor id </th>
												<th align="center"> operation </th>
											</tr>
											<tbody id="personal_info"></tbody>
										</table>
									</div>	
								</div>
	
								<div role="tabpanel" class="tab-pane fade" id="Q2">
									<div>
										<table location="top">
											<tr align="center">
												<th align="center"> ID </th>
												<th align="center"> Title </th>
												<th align="center"> Content </th>
												<th align="center"> Operation </th>
											</tr>
											<tbody id="diet"></tbody>
										</table>
									</div>
								</div>
	
								<div role="tabpanel" class="tab-pane fade" id="Q3">
									<table>
										<tr align="center">
											<th align="center"> ID </th>
											<th align="center"> Title </th>
											<th align="center"> Content </th>
											<th align="center"> Operation </th>
										</tr>
										<tbody id="health"></tbody>
									</table>
								</div>
							</div>
							
    					</div>
					</div>
				</div>
		</div>
	</div>
	<script>
		$(document).ready(function(){
        	queryInfo();
        	});
		
		function queryInfo(){
			var patient_name=$("#p_name").val();
			var doctor_name=$("#doc_id").val();
			$.ajax({
        	    url: "/Search/queryInfo", 
            	type: "POST",  
	            async: false,
    	        data:{
        	        'patient_name' : patient_name,
					'doctor_name':doctor_name
            	},
	            success: function (result) {
    	            if (result.message == "success!") {
						if(result.dbdata.length==0){
							$("#personal_info").empty()
							alert("no datas")
						}
						else{
							$("#personal_info").empty()
							var count=0;
							for (var i=0 ;i<result.dbdata.length ;i++){
								addtableitemMenu(result.dbdata[i])                      
							}   
						}
						        
                	}
                	else {
	                    alert(result.message)
                	}
            	}
        	});
		}
		function addtableitemMenu(item){
			var html = $("<tr>"    //开始拼接HTML元素，将取到的东西展示到对用的input中
				+"<td>"+item[0]+"</td>"
				+"<td>"+item[1]+"</td>"
				+"<td>"+item[7]+"</td>"
				+"<td align='center'>"
	    	    +"<input type='button' value='viewDetail' onclick='viewDetail(this)'/>"
				+"</td></tr>");
				$("#personal_info").append(html); 
	}




	function viewDetail(btn){
		var tds=$(btn).parent().siblings();//获取当前元素的父节点的全部兄弟节点，就是当前这行的所有td
		var Id=$(tds).eq(0).text();
		if(Id==1){
			location.href='/Search/detail?'+'id=' + Id;
		}
		else{
			alert("You can only view your own information")
		}
		
	}
	</script>
</body>
</html>